<template>
  <div>
    <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle" />
    <r-table
      :isSelection="false"
      :isHandle="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      @refresh="page()" />
    <r-form labelWidth="100px" :isHandle="true" :formRules="formRules" :formCols="formCols" :formHandle="formHandle" :formData="formData" ref="elForm" :inline="false" dialogWidth="550px" />

    <changePwd :res="changePwdData" v-if="changePwdData.show" v-on:changePwdCall="changePwdCall"></changePwd>
  </div>
</template>

<script>
import changePwd from "./cus/changePwd";
export default {
  components: {
    changePwd
  },
  data() {
    var password2 = (rule, value, callback) => {
      if (value != this.formData.password) {
        return callback(new Error('两次密码不一样'))
      } else {
        callback()
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      changePwdData: {
        show: false
      },
      tableLoading: false,
      searchData: {
        userName:'',
        phonenumber:'',
        roleName:''
      },
      searchForm: [
        { type: "input", placeholder: "登录账号", prop: "userName", width: 200 },
        { type: "input", placeholder: "手机号", prop: "phonenumber", width: 200 },
        { type: "select", placeholder: "所属角色", prop: "roleName", width: 200,options:[] },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: e => this.getData()
        },
      ],
      tableHandles: [
        {
          label: "添加管理员",
          type: "primary",
          handle: e => {this.elFormVisible()} ,
        }
      ],
      tableData: [{}],
      tableCols: [
        { label: "ID", prop: "userId" },
        { label: "登录账号", prop: "userName" },
        { label: "姓名", prop: "nickName" },
        { label: "手机号", prop: "phonenumber" },
        { label: "所属角色", prop: "roleName" },
        { label: "创建时间", prop: "createTime" },
        { label: "是否启用", prop: "status", theme: e => e.status == 0 ? 'primary' : 'danger', type: "tag", formatter: e => e.status == 0 ? '启用' : '禁用' },
        {
          label: "操作",
          type: "button",
          width: 260,
          btnList: [
            {
              label: "编辑",
              type: "success",
              size: "mini",
              icon: "el-icon-search",
              handle: (row) => this.elFormDetail(row)
            },
            {
              label: "删除",
              type: "danger",
              size: "mini",
              icon: "el-icon-delete",
              handle: (row) => this.del(row)
            },
            // {
            //   label: "重置密码",
            //   type: "success",
            //   size: "mini",
            //   icon: "el-icon-search",
            //   handle: (row) => {
            //     this.changePwdData = {
            //       show: true,
            //       id: row.id
            //     }
            //   }
            // },
          ]
        },
      ],
      pagination: { limit: 10, offset: 2, total: 1 },
      formData: {
        username: '',
        password: "",
        roleId: "",
        name: "",
        phone: "",
      },
      formCols: [
        { type: "input", label: "管理员名称", width: 350, prop: "name" },
        { type: "input", label: "登录账号", width: 350, prop: "username" },
        { type: "input", label: "手机号码", width: 350, prop: "phone" },
        { type: "select", label: "选择角色", width: 350, prop: "roleId", options: [] },
        { type: "input", label: "密码", width: 350, prop: "password", isShow: (e) => this.isShow_(e) }
      ],
      formRules: {
        username: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        phone: [
          { required: false, message: '请输入', trigger: 'blur' },
        ],
        name: [
          { required: false, message: '请输入', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        roleId: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
      },
      formHandle: [
        {
          label: "确认",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit(),
        },
        {
          label: "取消",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible(),
        },
      ],
    };
  },
  created() { },
  mounted() {
    this.getData();
    this.getRoleList();
  },
  methods: {
    isShow_() {
      if (this.formData.id) {
        this.formRules.password[0].required=false;
        return true
      } else {
        this.formRules.password[0].required=true;
        return true
      }
    },
    changePwdCall() {
      this.changePwdData.show = false;
    },
    del(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var res = await this.apis.user_delete({
          userId: row.userId
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData();
      }).catch(() => {

      });
    },
    async getRoleList() {
      var res = await this.apis.getRoleList({});
      var list = res.rows || [];
      let list2=[];
      list.map(res => {
        res.value = res.roleId;
        res.label = res.roleName;
        let obj={
          value:res.roleName,
          label:res.roleName
        }
        list2.push(obj);
      });



      this.formCols[this.labIndex(this.formCols, '选择角色')].options = list;
      this.searchForm[this.labIndex2(this.searchForm, 'roleName')].options = list2;
    },
    async getData() {
      var res = await this.apis.user_list({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        userName:this.searchData.userName,
        phonenumber:this.searchData.phonenumber,
        roleName:this.searchData.roleName,
      });
      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    },
    createdAcc() {
      this.elFormVisible();
    },
    async elFormDetail(row) {

      this.formData.id = row.userId;
      this.formData.name=row.nickName;
      this.formData.phone=row.phonenumber;
      this.formData.username=row.userName;
      this.formData.roleId=row.roleId;


      this.elFormVisible()
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit();
        }
      })
    },
    async submit() {
      if (!this.formData.id) {
        var res = await this.apis.user_save({
          userName: this.formData.username,
          nickName: this.formData.name,
          phonenumber: this.formData.phone,
          password: this.formData.password,
          roleIds: [this.formData.roleId]
        });
      } else {
        var res = await this.apis.user_update({
          userName: this.formData.username,
          nickName: this.formData.name,
          phonenumber: this.formData.phone,
          password: this.formData.password,
          roleIds: [this.formData.roleId],
          userId: this.formData.id
        });
      }
      this.elFormVisible();

      this.getData();


    }
  },
};
</script>

<style scoped lang="scss">
</style>
